<template>
  <div class="task_model tapStyle secondary-page-mode">
     <div class="secondary-toolbar">
          <span>时间 : </span>&nbsp;
          <div class="state-radio-wrap layoutBox" style="vertical-align: 6px;">
                <el-radio-group v-model="stateRadio" size="small" @change="statusChange">
                    <el-radio-button label="1">近半年</el-radio-button>
                    <el-radio-button label="2">近一年</el-radio-button>
                    <el-radio-button label="3">近两年</el-radio-button>
                </el-radio-group>
          </div>
          <div class="layoutBox" style="width:250px">
                <el-date-picker
                  v-model="time"
                  type="daterange"
                  range-separator="~"
                 
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
          </div>
         &emsp;
          <span>人员 : </span>&nbsp;
          <div class="layoutBox" style="width:150px;vertical-align: 1px;" >
             
                <yf-dropdowntree :treeData='treedata' :treeConfig='treeConfig'></yf-dropdowntree>
             
          </div>&emsp;
          <el-button ><i class="iconfont icon-sousuo"></i>查询</el-button>
         
     </div>
     <div class="currency-mode-wrap">
        
          <div class="real-content">
            <div id="lineEchart"></div>
            <div class="pie-echart-box">
              <div class="item">
                <div class="item-title">完成状况</div>
                <div id="statusPie"></div>
              </div>
              <div class="item">
                <div class="item-title">紧急程度</div>
                <div id="degreePie"></div>
              </div>
            </div>
          </div>
     </div>
  </div>
</template>

<script>
var treedata = [
  {
    label: "一级 1",
    id: 1,
    children: [
      {
        label: "二级 1-1",
        id: 2,
        children: [
          {
            label: "二级 1-1",
            id: 3,
            children: [
              {
                label: "二级 1-4",
                id: 4
              },
              {
                label: "二级 1-5",
                id: 5
              },
              {
                label: "二级 1-6",
                id: 6
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 7,
            children: [
              {
                label: "二级 1-1",
                id: 8,
         
              },
              {
                label: "二级 1-1",
                id: 9,
            
              },
              {
                label: "二级 1-1",
                id: 10,
              
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 11,
            children: [
              {
                label: "二级 1-1",
                id: 12
              },
              {
                label: "二级 1-1",
                id: 13
              },
              {
                label: "二级 1-1",
                id: 14
              }
            ]
          }
        ]
      }
    ]
  }
];
export default {
  name: "",
  data() {
    return {
      value: "",
      treedata:treedata,
      treeConfig:{
        showCheckbox:false,
        defaultId:4,
        defaultText:'二级 1-4',
      },
      time: [new Date(+new Date() - 182.5 * 24 * 60 * 60 * 1000), new Date()],
      stateRadio:'1',
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ]
    };
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  mounted(){
       this.createLineEchart();
      this.createPieEchart();
  },
  methods: {
    statusChange(v){
      if (v == '1') {
          this.time = [new Date(+new Date() - 182.5 * 24 * 60 * 60 * 1000), new Date()]
        } else if (v === '2') {
          this.time = [new Date(+new Date() - 365 * 24 * 60 * 60 * 1000), new Date()]
        } else if (v === '3'){
          this.time = [new Date(+new Date() - 2 * 365 * 24 * 60 * 60 * 1000), new Date()]
        }
    },
    //线图
    createLineEchart() {
      let myChart = this.$echarts.init(document.getElementById("lineEchart"));
      let option = {
        color: ["#FF7E00", "#24C761", "#1870D0"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: "top",
          right: "3%",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 15,
          data: [
            { name: "进行中", icon: "rect" },
            { name: "已完成", icon: "rect" },
            { name: "新创建", icon: "rect" }
          ]
        },
        grid: {
          left: "20px",
          top: "10%",
          bottom: "45px",
          right: "20px",
          containLabel: true
        },
        dataZoom: [
          {
            type: "slider",
            show: true, //是否显示
            realtime: true, //
            start: 10, //伸缩条开始位置（1-100），可以随时更改
            end: 50 //伸缩条结束位置（1-100），可以随时更改
          }
        ],
        xAxis: {
          type: "category",
          axisTick: {
            show: false
          },
          data: [
            "张**",
            "李**",
            "张**",
            "王*",
            "陈**",
            "张**",
            "李**",
            "张**",
            "王*",
            "陈**",
            "张**",
            "李**",
            "张**",
            "王*",
            "陈**"
          ]
        },
        yAxis: {
          type: "value",
          max: function(value) {
            return value.max + 10;
          },
          axisTick: {
            show: false
          }
          // splitLine: {
          //   show: false
          // }
        },
        series: [
          {
            name: "进行中",
            type: "bar",
            barMaxWidth: "12px",
            data: [10, 10, 10, 10, 12, 11, 12, 10, 10, 10]
          },
          {
            name: "已完成",
            type: "bar",
            barMaxWidth: "12px",
            data: [40, 30, 20, 25, 30, 30, 25, 40, 30, 20]
          },
          {
            name: "新创建",
            type: "bar",
            barMaxWidth: "12px",
            data: [50, 60, 70, 65, 58, 59, 63, 50, 60, 70]
          }
        ]
      };
      myChart.setOption(option, true);
    },
    //饼图
    createPieEchart() {
      let statusData = [
        { value: 4, name: "进行中" },
        { value: 3, name: "已完成" },
        { value: 13, name: "逾期" }
      ];
      let degreeData = [
        { value: 6, name: "正常" },
        { value: 5, name: "紧急" },
        { value: 9, name: "非常紧急" }
      ];
      //完成情况
      let status = this.$echarts.init(document.getElementById("statusPie"));
      let option1 = {
        color: ["#1870D0", "#24C761", "#FFB200"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          right: "15%",
          top: "center",
          itemGap: 20,
          itemWidth: 20,
          itemHeight: 12,
          data: [
            { name: "进行中", icon: "triangle" },
            { name: "已完成", icon: "triangle" },
            { name: "逾期", icon: "triangle" }
          ],
          textStyle: {
            rich: {
              a: {
                width: 60,
                fontSize: 13,
                color: "#1a1a1a"
              },
              b: {
                width: 50,
                fontSize: 13,
                color: "#1a1a1a",
                verticalAlign: "middle"
              },
              c: {
                width: 40,
                fontSize: 13,
                color: "#1a1a1a"
              }
            }
          },
          formatter: function(name) {
            let arr = [];
            let total = 0;
            let value = 0;
            for (let i of statusData) {
              total += i.value;
              if (i.name === name) {
                value = i.value;
              }
            }
            arr = [
              "{a|" +
                name +
                "}{b|" +
                value +
                "}{c|" +
                (value / total * 100).toFixed(2) +
                "%}"
            ];
            return arr;
          }
        },
        calculable: true,
        series: [
          {
            type: "pie",
            radius: [30, 92],
            center: ["30%", "50%"],
            roseType: "radius",
            label: {
              show: false
            },
            data: statusData
          }
        ]
      };
      //紧急程度
      let degree = this.$echarts.init(document.getElementById("degreePie"));
      let option2 = {
        color: ["#3EB45F", "#FFB200", "#FA673D"],
        legend: {
          orient: "vertical",
          right: "15%",
          top: "center",
          itemGap: 20,
          itemWidth: 20,
          itemHeight: 10,
          data: [
            { name: "正常", icon: "rect" },
            { name: "紧急", icon: "rect" },
            { name: "非常紧急", icon: "rect" }
          ],
          textStyle: {
            rich: {
              a: {
                width: 70,
                fontSize: 13,
                color: "#1a1a1a"
              },
              b: {
                width: 50,
                fontSize: 13,
                color: "#1a1a1a",
                verticalAlign: "middle"
              },
              c: {
                width: 40,
                fontSize: 13,
                color: "#1a1a1a"
              }
            }
          },
          formatter: function(name) {
            let arr = [];
            let total = 0;
            let value = 0;
            for (let i of degreeData) {
              total += i.value;
              if (i.name === name) {
                value = i.value;
              }
            }
            arr = [
              "{a|" +
                name +
                "}{b|" +
                value +
                "}{c|" +
                (value / total * 100).toFixed(2) +
                "%}"
            ];
            return arr;
          }
        },
        calculable: true,
        series: [
          {
            type: "pie",
            radius: [72, 92],
            center: ["30%", "50%"],
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                formatter: function(dom) {
                  let arr = [];
                  let value = 0;
                  let total = 0;
                  for (let i of degreeData) {
                    total += i.value;
                    if (i.name === dom.name) {
                      value = i.value;
                    }
                  }
                  arr = [
                    "{a|" +
                      (value / total * 100).toFixed(2) +
                      "%}\n{b|" +
                      dom.name +
                      "}"
                  ];
                  return arr;
                },
                rich: {
                  a: {
                    fontSize: "35",
                    lineHeight: "45",
                    fontWeight: "bold"
                  },
                  b: {
                    color: "#1a1a1a",
                    fontSize: "13"
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            selectedMode: "single",
            legendHoverLink: false,
            hoverOffset: 0,
            data: degreeData
          }
        ]
      };
      status.setOption(option1, true);
      degree.setOption(option2, true);
      degree.dispatchAction({
        type: "pieSelect",
        seriesIndex: 0,
        dataIndex: 0
      });
      degree.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });
      degree.on("mouseover", function(e) {
        //当检测到鼠标悬停事件，取消默认选中高亮
        degree.dispatchAction({
          type: "downplay",
          seriesIndex: 0
        });
        degree.dispatchAction({
          type: "pieSelect",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
        degree.dispatchAction({
          //高亮显示悬停的那块
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      });
      degree.on("mouseout", function(e) {
        //检测鼠标移出后显示之前默认高亮的那块
        degree.dispatchAction({
          type: "pieSelect",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
        degree.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      });
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
.task_model {
  height: 100%;
  .currency-mode-wrap {
    border: 1px solid #d9e6f7;
    .real-content {
      height: 100%;
      min-height: 600px;
      padding: 12px;
      #lineEchart {
        height: 50%;
      }
      .pie-echart-box {
        height: calc(50% - 6px);
        margin-top: 6px;
        .item {
          display: inline-block;
          float: left;
          width: calc(50% - 4px);
          height: 100%;
          border: 1px solid #c7d8ee;
          .item-title {
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid #c7d8ee;
            background: #f2f9fc;
          }
          #statusPie,
          #degreePie {
            height: calc(100% - 36px);
          }
        }
        .item + .item {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
